<template>
    <div>
    <Modal v-model="modalSs11012" :title=title width="1150" cancel-text="关闭" style="position:relative;">
        <Form ref="dataSs11012" :model="dataSs11012" :rules="ruleSs11012" inline :label-width="160"  :disabled="disableSubmit">
            <table style="width:100%;">
                <tr>
                    <td style="width:33%;">
                        <FormItem label="姓名" prop="azcp0003">
                            <Input v-model="dataSs11012.azcp0003" placeholder="" class="itemStyle" />
                        </FormItem>
                    </td>
                    <td style="width:33%;">
                        <FormItem label="与申请人关系" prop="azcp0517">
                            <dictSelect :sel_val='dataSs11012.azcp0517' :bindData.sync="dataSs11012.azcp0517"
                                        dictCode="familyrelationship" hideKeys="01" class="itemStyle"  />
                        </FormItem>
                    </td>
                    <td rowspan="4" style="width:34%;">
                        <img :src="header" alt="..." style="height: 160px; width:120px;right:10%;" @click="uploadPositiveImg('header')"  >
                    </td>
                </tr>
                <tr>
                    <td>
                        <FormItem label="证件类型" prop="azcp0002">
                            <dictSelect :sel_val='dataSs11012.azcp0002'   :bindData.sync="dataSs11012.azcp0002" dictCode="certificatetype" showKeys="1"  class="itemStyle"/>
                        </FormItem>
                    </td>
                    <td>
                        <FormItem label="证件号码" prop="azcp0001">
                            <Input v-model="dataSs11012.azcp0001" placeholder=""    class="itemStyle" @on-blur="checkIdcard()"/>
                        </FormItem>
                    </td>
                </tr>
                <tr>
                    <td>
                        <FormItem label="户籍类别" prop="azcp0013">
                            <dictSelect :sel_val='dataSs11012.azcp0013'   :bindData.sync="dataSs11012.azcp0013" dictCode="registertype"  class="itemStyle"/>
                        </FormItem>
                    </td>
                    <td>
                        <FormItem label="民族" prop="azcp0007">
                            <dictSelect :sel_val='dataSs11012.azcp0007'   :bindData.sync="dataSs11012.azcp0007" dictCode="nation"  class="itemStyle"/>
                        </FormItem>
                    </td>
                </tr>
                <tr>
                    <td>
                        <FormItem label="文化程度" prop="azcp0008">
                            <dictSelect :sel_val='dataSs11012.azcp0008'   :bindData.sync="dataSs11012.azcp0008" dictCode="education"  class="itemStyle"/>
                        </FormItem>
                    </td>
                    <td>
                        <FormItem label="婚姻状况" prop="azcp0010">
                            <dictSelect :sel_val='dataSs11012.azcp0010'   :bindData.sync="dataSs11012.azcp0010" dictCode="maritalstatus" class="itemStyle"/>
                        </FormItem>
                    </td>
                </tr>
                <tr>
                    <td>
                        <FormItem label="政治面貌" prop="azcp0012">
                            <dictSelect :sel_val='dataSs11012.azcp0012'   :bindData.sync="dataSs11012.azcp0012" dictCode="politicaloutlook" class="itemStyle"/>
                        </FormItem>
                    </td>
                    <td>
                        <FormItem label="劳动能力丧失情况" prop="azcp0502">
                            <dictSelect :sel_val='dataSs11012.azcp0502'   :bindData.sync="dataSs11012.azcp0502" dictCode="workability" class="itemStyle" />
                        </FormItem>
                    </td>
                    <td style="width:33%;">
                        <FormItem label="就业状况" prop="azcp0540">
                            <dictSelect :sel_val='dataSs11012.azcp0540'   :bindData.sync="dataSs11012.azcp0540" dictCode="workstatus" class="itemStyle"/>
                        </FormItem>
                    </td>
                </tr>
                <tr>
                    <td>
                        <FormItem label="是否残疾" prop="azcp0503">
                            <dictSelect :sel_val='dataSs11012.azcp0503'   :bindData.sync="dataSs11012.azcp0503" dictCode="yesorno" @changeState="setDisabilityState02" class="itemStyle"/>
                        </FormItem>
                    </td>
                    <td>
                        <FormItem label="残疾类别" prop="azcp0504" :rules="ruleAzcp0504">
                            <dictSelect :sel_val='dataSs11012.azcp0504'   :bindData.sync="dataSs11012.azcp0504" dictCode="disabilitytype"   class="itemStyle"/>
                        </FormItem>
                    </td>
                    <td>
                        <FormItem label="残疾等级" prop="azcp0505" :rules="ruleAzcp0505">
                            <dictSelect :sel_val='dataSs11012.azcp0505'   :bindData.sync="dataSs11012.azcp0505" dictCode="disabilityclass"   class="itemStyle"/>
                        </FormItem>
                    </td>
                </tr>
                <tr>
                    <td>
                        <FormItem label="健康状况" prop="azcp0009">
                            <dictSelect :sel_val='dataSs11012.azcp0009'   :bindData.sync="dataSs11012.azcp0009" dictCode="health"  class="itemStyle" @changeState="setHealthState02"/>
                        </FormItem>
                    </td>
                    <td>
                        <FormItem label="重病病种" prop="azcp0524" :rules="ruleAzcp0524">
                            <dictSelect :sel_val='dataSs11012.azcp0524'   :bindData.sync="dataSs11012.azcp0524" dictCode="sicknesstype"  class="itemStyle"/>
                        </FormItem>
                    </td>
                    <td>
                        <FormItem label="是否三无人员" prop="azcp0512">
                            <dictSelect :sel_val='dataSs11012.azcp0512'   :bindData.sync="dataSs11012.azcp0512" dictCode="yesorno" class="itemStyle"/>
                        </FormItem>
                    </td>
                </tr>
                <!--                    户籍区划功能-->
                <tr>
                    <td colspan="4">
                        <FormItem label="户籍地址">
                            <Ss01003Tag :bindshengjiData.sync="shengQuHua"
                                        :bindshijiData.sync="shiQuHua"
                                        :shengji_value="shengQuHua"
                                        :shiji_value="shiQuHua"
                                        :shengji_disabled="hujiquhuaDisabled"
                                        :shiji_disabled="hujiquhuaDisabled">
                            </Ss01003Tag>
                        </FormItem>
                    </td>
                </tr>
                <tr>
                    <td colspan="3">
                        <FormItem label="证件上传类型" >
                            <RadioGroup v-model="dataSs11012.azcp0593" type="button" @on-change="showUpload">
                                <Radio label="0"   >身份证正反面照片上传</Radio>
                                <Radio label="1"   >户口簿个人页照片上传</Radio>
                            </RadioGroup>
                        </FormItem>
                    </td>
                    <td colspan="3" align="left">
                    </td>
                </tr>
            </table>
        </Form>
        <Row class="" style="height:250px;line-height:250px">
            <Col span="24" style="text-align: center" class="">
                <Row v-if="identityCardVisible">
                    <Col span="10" style="text-align: center" class="">
                        <div class="imgBackColor">
                            <img :src="sfz_z" alt="..." class="head-img1"  >
                        </div>
                    </Col>
                    <Col span="2" style="text-align: center" class="">
                        <div class="positiveTDiv"  >
                            正面上传
                        </div>
<!--                        <div class="positiveBDiv">-->
<!--                            <span>正面拍摄</span>-->
<!--                        </div>-->
                    </Col>
                    <Col span="10" style="text-align: center" class="">
                        <div class="imgBackColor">
                            <img :src="sfz_f" alt="..." class="head-img1"  >
                        </div>
                    </Col>
                    <Col span="2" style="text-align: center" class="">
                        <div class="positiveTDiv" >
                            反面上传
                        </div>
<!--                        <div class="positiveBDiv">-->
<!--                            <span>反面拍摄</span>-->
<!--                        </div>-->
                    </Col>
                </Row>
                <Row v-if="householdRegisterVisible">
                    <Col span="10" style="text-align: center" class="">
                        <div class="imgBackColor">
                            <img :src="hkb" alt="..." class="head-img1"  >
                        </div>
                    </Col>
                    <Col span="2" style="text-align: center" class="">
                        <div class="positiveTDiv"  >
                            户口簿上传
                        </div>
<!--                        <div class="positiveBDiv">-->
<!--                            <span>户口簿拍摄</span>-->
<!--                        </div>-->
                    </Col>
                    <Col span="10" style="text-align: center" class="">

                    </Col>
                    <Col span="2" style="text-align: center" class="">

                    </Col>
                </Row>
            </Col>
        </Row>
        <div slot="footer">
            <Button type="text" size="large" @click="modalSs11012 = false">关闭</Button>
<!--            <Button type="primary" size="large"  @click="handleSubmitSs11012('dataSs11012')">确定</Button>-->
        </div>
    </Modal>

    <Modal v-model="up_pic_mol" title="图片上传" @on-ok="changeToView" :closable="false">
        <Upload   multiple action="/api/ac/hdplugin/ossService/uploadBase64" :before-upload="beforeUpload">
            <Button icon="ios-cloud-upload-outline">上传图片</Button>
            <span style="margin-left: 200px">建议上传小于8M的图片</span>
        </Upload>
        <img :src="temp_photo" style="width: 100%"/>
    </Modal>
    <Modal v-model="picPreviewMol.preShow" :closable="false" :styles="{top: '20px'}" width="532">
        <Carousel v-model="picPreviewMol.picIndex" style="width:500px" dots="outside" trigger="hover">
            <CarouselItem class="centerimg" v-for="(imginfo, index) in picPreviewMol.pic_urls" :key="index">
                <img :src="imginfo" class="pre_img_style" />
            </CarouselItem>
        </Carousel>
        <div slot="footer" style="text-align: center">
            <Button @click="picPreviewMol.preShow=false">关闭</Button>
        </div>
    </Modal>
    </div>
</template>

<script>
  import { getSign, createUpLoadFiles,compressImg} from '@/api/common'
  import dictSelect from '@/components/dictSelect/dictSelect.vue'
    import pic_hkb from '@/assets/images/hkb.jpg'
    import pic_sfz_z from '@/assets/images/sfz_z.jpg'
    import pic_sfz_f from '@/assets/images/sfz_f.jpg'
    import pic_header from '@/assets/images/header.jpeg'
    import {postAction} from '@/api/request'
    import DateFormat from '@/plugins/format.js'
    import {IdentityCodeValid,getAgeByIdcardByHD} from '@/plugins/idcardValid.js'
  import Ss01003Tag from '@/components/system/ss01003-select'// 户籍区划功能
  export default {
      components: {
        dictSelect,
          Ss01003Tag //户籍区划功能

      },
        data() {
            return {
                shengQuHua: '', //户籍区划功能
                shiQuHua: '', //户籍区划功能
                hujiquhuaDisabled: false, //户籍区划功能
                disableSubmit: true,
              householdRegisterState:true, //户口簿是否可上传，默认false
              ss11001Id:'',
              url: {
                insertSs11012:"/api/ac/subsistence/ss11012Service/insertData",
                updateSs11012:"/api/ac/subsistence/ss11012Service/updateData",
              },
              title:'',
              dataSs11012: {
                type: '0', // 非保障
                id: '',
                azcp0001: '',
                azcp0002: '',
                azcp0003: '',
                azcp0517: '',
                azcp0519: '',
                azcp0013: '',
                azcp0007: '',
                azcp0008: '',
                azcp0009: '',
                azcp0010: '',
                azcp0012: '',
                azcp0502: '',
                azcp0503: '',
                azcp0504: '',
                azcp0505: '',
                azcp0524: '',
                azcp0543: '',
                azcp0551: '',
                azcp0552: '',
                azcp0512: '',
                azcp0593: '',
                azcp0594: '',
                azcp0500:''
              },
              modalSs11012: false, //非保障人员model显隐
              healthState02:false,  //保障人员健康状况联动状态
              disabilityState02:false, //非保障人员残疾联动状态
              fieldsToValidate02: ["azcp0003","azcp0517","azcp0002","azcp0001","azcp0013","azcp0007","azcp0008","azcp0012","azcp0010",
                "azcp0540","azcp0502","azcp0503","azcp0504","azcp0505","azcp0009","azcp0524","azcp0512"],
              ruleSs11012: {
                azcp0003: [
                  {required: true, message: '请输入姓名', trigger: 'blur'}
                ],
                azcp0517: [
                  {required: true, message: '请选择与申请人关系', trigger: 'blur'}
                ],
                azcp0002: [
                  {required: true, message: '请选择证件类型', trigger: 'blur'}
                ],
                azcp0001: [
                  {required: true, message: '请填写证件号码', trigger: 'blur'}
                ],
                azcp0013: [
                  {required: true, message: '请选择户籍类别', trigger: 'blur'}
                ],
                azcp0007: [
                  {required: true, message: '请选择民族', trigger: 'blur'}
                ],
                azcp0008: [
                  {required: true, message: '请选择文化程度', trigger: 'blur'}
                ],
                azcp0012: [
                  {required: true, message: '请选择政治面貌', trigger: 'blur'}
                ],
                azcp0010: [
                  {required: true, message: '请选择婚姻状况', trigger: 'blur'}
                ],
                azcp0540: [
                  {required: true, message: '请选择就业状况', trigger: 'blur'}
                ],
                azcp0009: [
                  {required: true, message: '请选择健康状况', trigger: 'blur'}
                ],
                azcp0502: [
                  {required: true, message: '请选择劳动能力丧失情况', trigger: 'blur'}
                ],
                azcp0503: [
                  {required: true,message: '请选择是否残疾', trigger: 'blur'}
                ],
                azcp0512: [
                  {required: true, message: '请选择是否三无人员', trigger: 'blur'}
                ]
              },
              ruleAzcp0504:{message: '请选择残疾类别', trigger: 'blur'},
              ruleAzcp0505:{message: '请选择残疾等级', trigger: 'blur'},
              ruleAzcp0524:{message: '请选择重病病种', trigger: 'blur'},
              hkb:"",
              sfz_z:"",
              sfz_f:"",
              header:"",
              identityCardVisible:true,
              householdRegisterVisible:false,
              temp_photo: '',
              upPicData: {},
              imgType: '',
              picPreviewMol: {
                preShow: false,
                pic_urls: [],
                picIndex: 0
              },
              up_pic_mol: false,
            }
        },
        methods: {
          showUpload(type){
            let that=this;
            if(type=='0'){
              that.identityCardVisible=true;
              that.householdRegisterVisible=false;
              that.dataSs11012.azcp0593='0';
            }else{
              that.identityCardVisible=false;
              that.householdRegisterVisible=true;
              that.dataSs11012.azcp0593='1';
            }
          },
          create(){
            let that=this;
            that.dataSs11012 = {}
            that.title="非保障家庭成员录入"
            that.modalSs11012 = true
            that.initRelation02();
            this.sfz_z = pic_sfz_z;
            this.sfz_f = pic_sfz_f;
            this.header = pic_header;
            this.hkb = pic_hkb;
            that.dataSs11012.azcp0500=that.ss11001Id;
            that.householdRegisterState=false;
            that.showUpload('0');
          },
          edit(record){
            let that=this;
            that.title="非保障家庭成员详情"
            that.modalSs11012 = true
            that.dataSs11012 = Object.assign({}, record)
            that.initRelation02();

            if(that.dataSs11012.azcp0593=='1'){
              let azcp0594=that.dataSs11012.azcp0594;
              if(azcp0594!=null&&typeof(azcp0594)!='undefined' ){
                this.hkb = that.dataSs11012.azcp0594;
              }else{
                this.hkb =pic_hkb;
              }
            }else{
              let azcp0551=that.dataSs11012.azcp0551;
              if(azcp0551!=null&&typeof(azcp0551)!='undefined'){
                this.sfz_z = that.dataSs11012.azcp0551;
              }else{
                this.sfz_z=pic_sfz_z;
              }
              let azcp0552=that.dataSs11012.azcp0552;
              if(azcp0552!=null&&typeof(azcp0552)!='undefined'){
                this.sfz_f = that.dataSs11012.azcp0552;
              }else{
                this.sfz_f=pic_sfz_f;
              }
            }

            let azcp0519=that.dataSs11012.azcp0519;
            if(azcp0519!=null&&typeof(azcp0519)!='undefined' ){
              this.header = that.dataSs11012.azcp0519;
            }else{
              this.header =pic_header;
            }

            that.showUpload(that.dataSs11012.azcp0593);
            that.checkIdcard();
              that.shengShiQuHua(that.dataSs11012.azcp0591)
          },
          handleSubmitSs11012 (name) { // 非保障人员信息提交
            let that=this;
            let validate = true;
            let err_msg=[];
            for(let item of that.fieldsToValidate02){
              that.$refs[name].validateField(item, (error) => {
                if (error) {
                  validate = false;
                  err_msg.push(that.ruleSs11012[item][0].message);
                }
              })
            }
            if (validate) {
              let dataParam = {}
              dataParam = Object.assign({}, that.dataSs11012)
              let url=null;
              if(dataParam.id==null){
                url=that.url.insertSs11012
              }else{
                url=that.url.updateSs11012
              }

              if(dataParam.azcp0593=='1'){
                let azcp0594=dataParam.azcp0594;
                if(azcp0594==null||azcp0594==''||typeof(azcp0594)=='undefined'){
                  that.$Message.error('请上传个人户口簿页面照片');
                  return;
                }
                dataParam.azcp0551='';
                dataParam.azcp0552='';
              }else{
                let azcp0551=dataParam.azcp0551;
                if(azcp0551==null||azcp0551==''||typeof(azcp0551)=='undefined'){
                  that.$Message.error('请上传居民身份证正面照片');
                  return;
                }

                let azcp0552=dataParam.azcp0552;
                if(azcp0552==null||azcp0552==''||typeof(azcp0552)=='undefined'){
                  that.$Message.error('请上传居民身份证背面照片');
                  return;
                }
                dataParam.azcp0594='';
              }
              postAction(url, dataParam).then((res) => {
                if(res.data.data.code==1) {
                  that.modalSs11012 = false
                  that.$Message.success(res.data.data.msg)
                  that.$emit('ok');
                } else {
                  that.$Message.error(res.data.data.msg);
                }
              }).finally(() => {

              })
            }else{
              that.$Message.error(err_msg[0]);
              return;
            }
          },
          initRelation02(){ //初始化保障人员页面选择联动
            let that=this;
            that.setDisabilityState02();
            that.setHealthState02();
          },
          setDisabilityState02(){ //非保障残疾联动
            let that=this;
            let value=that.dataSs11012.azcp0503;
            if(value=='1'){
              that.disabilityState02=false;
              that.ruleAzcp0504=[{required:true,message: '请选择残疾类别', trigger: 'blur'}];
              that.ruleAzcp0505=[{required:true,message: '请选择残疾等级', trigger: 'blur'}];
              that.ruleSs11012.azcp0504=that.ruleAzcp0504;
              that.ruleSs11012.azcp0505=that.ruleAzcp0505;
            }else{
              that.ruleAzcp0504=[{required:false}];
              that.ruleAzcp0505=[{required:false}];
              that.dataSs11012.azcp0504='';
              that.dataSs11012.azcp0505='';
              that.disabilityState02=true;
              delete that.ruleSs11012.azcp0504;
              delete that.ruleSs11012.azcp0505;
            }
          },
          setHealthState02(){  //非保障健康联动
            let that=this;
            let value=that.dataSs11012.azcp0009;
            if(value=='40'){  //重病
              that.healthState02=false;
              that.ruleAzcp0524=[{required:true,message: '请选择重病病种', trigger: 'blur'}];
              that.ruleSs11012.azcp0524=that.ruleAzcp0524;
            }else{ //健康、一般、慢性病
              that.ruleAzcp0524=[{required:false}];
              that.dataSs11012.azcp0524='';
              that.healthState02=true;
              delete that.ruleSs11012.azcp0524;
            }
          },
          changeToView () {
            if (this.imgType === 'Positive') {
              this.sfz_z = this.temp_photo
            } else if (this.imgType === 'Back') {
              this.sfz_f = this.temp_photo
            } else if(this.imgType === 'Personal'){
              this.hkb = this.temp_photo
            } else if(this.imgType === 'header'){
              this.header = this.temp_photo
            }

          },
          uploadPositiveImg (type) {
            this.temp_photo = ''
            this.imgType = type
            this.up_pic_mol = true
            if (type === 'Positive') {
              this.upPicData.fileName = '身份证正面' + DateFormat(new Date(), 'YYYYMMDDhhmmss') + '.png'
            } else if (type === 'Back') {
              this.upPicData.fileName = '身份证背面' + DateFormat(new Date(), 'YYYYMMDDhhmmss') + '.png'
            } else if (type === 'Personal') {
              this.upPicData.fileName = '户口簿个人页' + DateFormat(new Date(), 'YYYYMMDDhhmmss') + '.png'
            } else if (type === 'header') {
              this.upPicData.fileName = '个人头像' + DateFormat(new Date(), 'YYYYMMDDhhmmss') + '.png'
            }
            //this.upPicData.filePath = 'itemorder/' + '/' + this.$route.params.code
            this.upPicData.filePath ='subsistence/'+DateFormat( new Date(), 'YYYYMMDD')+'/';
          },
          beforeAvatarUpload (file) {
            return new Promise(() => {
              compressImg(file, 200).then(res => {
                let that = this
                let index = res.indexOf('base64,') + 7
                that.upPicData.file = res.substring(index)
                that.upPic(that.upPicData)
              })
            })
          },
          beforeUpload (file) {
            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
            if (!isJpgOrPng) {
              this.$Notice.error({ title: '上传失败', desc: '上传文件只能是 JPG 或 PNG 格式！' })
              return false
            }
            let that = this
            this.upPicData.fileName = this.upPicData.fileName + '.' + file.type.substring(6)
            if (file.size / 1024 / 1024 > 1) { // 超过1M 压缩 图片为200K
              return this.beforeAvatarUpload(file)
            }
            const reader = new FileReader()
            reader.readAsDataURL(file)
            reader.onload = () => {
              let index = reader.result.indexOf('base64,') + 7
              that.upPicData.file = reader.result.substring(index)
              that.upPic(that.upPicData)
            }
            return false
          },
          upPic (obj) {
            var time = new Date().getTime()
            this.timeStep = time.toString()
            let param = {
              filePath: obj.filePath,
              fileName: obj.fileName,
              timestamp: this.timeStep
            }
            if (param.fileName.length > 20) {
              param.fileName = param.fileName.substring(0, 20) + '.png'
            }
            getSign(param).then(res => {
              if (res.data.errcode === 0) {
                createUpLoadFiles("/api/ac/hdplugin/ossService/uploadBase64", { sign: res.data.data.sign, timestamp: this.timeStep, filePath: param.filePath, fileName: param.fileName, file: obj.file }).then(res => {
                  if (res.data.errcode === 0) {
                    let imgurl = res.data.data
                    if (this.imgType === 'Positive') {
                      this.dataSs11012.azcp0551=imgurl
                    } else if (this.imgType === 'Back') {
                      this.dataSs11012.azcp0552=imgurl
                    } else if(this.imgType === 'Personal'){
                      this.dataSs11012.azcp0594=imgurl
                    } else if(this.imgType === 'header'){
                      this.dataSs11012.azcp0519=imgurl
                    }
                    this.temp_photo = imgurl
                  } else {
                    this.$Notice.error({ title: '上传失败', desc: res.data.data.msg })
                  }
                })
              } else {
                this.$Notice.error({ title: '上传失败', desc: res.data.data.msg })
              }
            })
          },
          checkIdcard(){
            let that=this;
            let azcp0001=that.dataSs11012.azcp0001;
            azcp0001=azcp0001.toUpperCase();
            that.dataSs11012.azcp0001=azcp0001;

            if(!IdentityCodeValid(azcp0001)){
              that.$Message.error('申请人身份证号码格式不合法');
              that.dataSs11012.azcp0001=null
            }else{
              let age=getAgeByIdcardByHD(azcp0001,new Date());
              if(age>18){
                that.householdRegisterState=true;
              }else{
                that.householdRegisterState=false;
              }
            }
          },
            // 户籍区划功能,
            shengShiQuHua(localOrNot){
                if (localOrNot == undefined || localOrNot == ''){
                    this.hujiquhuaDisabled = true
                    this.shengQuHua = ''
                    this.shiQuHua = ''
                }else if (localOrNot == '1'){ //本地户籍的, 区划 not editable
                    this.hujiquhuaDisabled = true
                    this.shengQuHua = '210000000000'
                    this.shiQuHua = '210100000000'
                }else if (localOrNot == '0'){ //外地户籍的, 区划 editable
                    this.hujiquhuaDisabled = false
                    this.shengQuHua = this.dataSs11012.azcp0595
                    this.shiQuHua = this.dataSs11012.azcp0596
                }
            },
        }
    }
</script>

<style scoped>
    /deep/.ivu-form-item-error-tip {
        display: none;
    }
    .ivu-form-item {
        margin-bottom: 0px;
    }
    .itemStyle{
        width:180px
    }
    .head-img1 {
        height: 200px;
        width: 250px;
        margin-top: 15px;
    }
    .head-img {
        height: 200px;
        width: 250px;
    }
    .imgBackColor {
        background-color: WhiteSmoke;
        height: 250px;
    }
    .positiveTDiv {
        height:240px;
        width:80px;
        line-height: 240px;
        background-color:	#7CCD7C;
        margin-bottom:10px;
        color: white;
        font-size: 15px;
        font-weight: 700;
        margin-left: 15px;
        border-radius: 3px;
    }
    .positiveBDiv {
        height:120px;
        width:80px;
        background-color:#7CCD7C;
        line-height:120px;
        color: white;
        font-size: 15px;
        font-weight: 700;
        margin-left: 15px;
    }
</style>
